<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>拖拽</title>
	<link rel="stylesheet" type="text/css" href="css/拖拽.css"/>
</head>
<body>
	<div class="box" >
		
	</div>
</body>
</html>
<script type="text/javascript">
	(function(){
		var box=document.getElementsByClassName("box")[0];
		box.style.left="50px";
		box.style.top="50px";
		var mouseX=0,mouseY=0;
		var old_x=0,old_y=0,new_x=0,new_y=0;
		var flag=false;
		box.onmousedown=function(e){
			flag=true;
			mouseX=e.pageX;
			mouseY=e.pageY;
			old_x=parseFloat(box.style.left.split('px')[0]);
			old_y=parseFloat(box.style.top.split('px')[0]);
		}
		document.onmouseup=function(e){
			flag=false;
		}
		box.onmousemove=function(e){
			if(flag){
				box.style.left=old_x+e.clientX-mouseX+"px";
				box.style.top=old_y+e.clientY-mouseY+"px";
			}
		}
		document.onmouseleave=function(e){
			flag=false
		}
	})()
</script>